<html>

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
<meta content="yes"name="apple-mobile-web-app-capable"/>
<meta content="black"name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no"name="format-detection"/>
<meta content="email=no"name="format-detection"/>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport" />
<script>


var arr =[]
var ExcludeArr =[]
var countNumber=0;
var count = 0;
var hideArr = []
function create(starti){
	//列
for(var i=starti;i<9;i++){
	//行
	var arrItem = []
	for(var j=0;j<9;j++){
		//行的每一个元素
		ExcludeArr =[]
		var columeArr = getColumeArr(j);//列
		var groupArr = getGroupArr(i,j);
		var number = getNumber(arrItem,columeArr,groupArr,ExcludeArr);
		count = count+1;
		if(number){
			arrItem.push(number);
		}
		else{
			countNumber =countNumber +1;
			if(countNumber>=1000){
				//1000次未成功
				countNumber =0
				arr.pop();
				ExcludeArr =[]
				create(i-1);
				return;
				//
			}
			ExcludeArr =[]
			create(i);
			return;
		}*/
		
		
	}
	arr.push(arrItem);
	if(i===8){
		return;
	}
	
}
console.log(arr);
}


function getRandomNumberByExcludeArr(Arr){
	var allArr =[1,2,3,4,5,6,7,8,9];
	var arr3 = allArr.filter(el => !~Arr.indexOf(el));
	var length = arr3.length;
	var index = Math.floor(Math.random() * (length));
	return arr3[index]
}

function getNumber(rowArr,columeArr,groupArr,excludeArr){
	
	var result = getRandomNumberByExcludeArr(excludeArr);
	if(rowArr.indexOf(result)==-1){//行内没重复
		if(columeArr.indexOf(result)==-1){//列内没有重复
				if(groupArr.indexOf(result)==-1){//组内没有重复
					return result
				}
				else{
					ExcludeArr.push(result);
					return getNumber(rowArr,columeArr,groupArr,ExcludeArr)
				}
			
			
		}
		else{
			ExcludeArr.push(result);
			return getNumber(rowArr,columeArr,groupArr,ExcludeArr)
		}
	}
	else{
		ExcludeArr.push(result);
		return getNumber(rowArr,columeArr,groupArr,ExcludeArr)
	}
}

/*
group like:
123
456
789
*/
function getGroupArr(columeIndex,rowIndex){
	var resultArr = [];
	var GroupColumeIndexArr =[];//列编号
	var GroupRowIndexArr =[];//行编号
	for(var i=0;i<3;i++){
		GroupColumeIndexArr.push(3*parseInt(columeIndex/3) + i)
		GroupRowIndexArr.push(3*parseInt(rowIndex/3) + i)
	}
	for(var o=0;o<3;o++){
		for(var p=0;p<3;p++){
			if(arr[GroupColumeIndexArr[o]]){
				if(arr[GroupColumeIndexArr[o]][GroupRowIndexArr[p]]){
					resultArr.push(arr[GroupColumeIndexArr[o]][GroupRowIndexArr[p]]);
				}
			}
		}
	}
	return resultArr;
	
}

function getColumeArr(rowIndex){
	var resultArr =[];
	for(var i=0;i< arr.length;i++){
		if(arr[i]){
			if(arr[i][rowIndex]){
				resultArr.push(arr[i][rowIndex]);
			}
		}
		
	}
	return resultArr;
}

function createContent(){
	arr=[];
	count =0
	create(0);

	for(var i=0;i<arr.length;i++){
		CreatehideArr();
		for(var j=0;j<9;j++){
			var item = arr[i][j];
			if(hideArr.indexOf(j)==-1){
				document.getElementById("table_" + i+"_" + j).style.color = "white";
				document.getElementById("table_" + i+"_" + j).textContent  = item;
			}
			else{
				document.getElementById("table_" + i+"_" + j).textContent  = "?";
				document.getElementById("table_" + i+"_" + j).style.color = "red";
			}
			
		}
	}
	
	document.getElementById("countStatistics").textContent  = count;
	
	
}

function createAnswer(){
	for(var i=0;i<arr.length;i++){
		
		for(var j=0;j<9;j++){
			var item = arr[i][j];
			//document.getElementById("table_" + i+"_" + j).style.color = "white";
			document.getElementById("table_" + i+"_" + j).textContent  = item;
			
		}
	}
}

function CreatehideArr(){
var allArr =[1,2,3,4,5,6,7,8,9];
hideArr =[]
var length = Math.floor(Math.random() * (1)+2);//2或3
for(var i=0;i<length;i++){
	var index = Math.floor(Math.random() * 8);
	hideArr.push(allArr[index]);
}

}

</script>
<style>
.table-item{
	display:inline-block;
	width:10vw;
}
#table_container{
	width:96vw;
	height:96vw;
	background-color:rgb(155,155,155);

}
.table-item{
	
	border:3px solid;
	width:9vw;
	height:9vw;
	font-size:1rem;
	color:white;
	line-height:9vw;
	
}
.control-button{
	height:10vw;
	whdth:20vw;
}
.title{
	height:2em;

	text-align:center;
	font-size:2em;
}

</style>
<div>
<div class="title">数独生成器</div>
<button class="control-button" type="button" onclick="createContent()">生成数独</button>
<button class="control-button" type="button" onclick="createAnswer()">解题</button>
<span>迭代次数:</span><span id="countStatistics"></span>
	<div style="width:100%; text-align:center;">
	<div id="table_container">
	</div>
	<div>
	
	
		
</div>
<script>
function createTable(){
	var tableHtml = ''
	for(var i=0;i<9;i++){
		var rowHtml = "";
		for(var j=0;j<9;j++){
			rowHtml = rowHtml + "<div class='table-item' id='table_"+i+"_"+j+"'></div>"
		}
		var rowWapperHtml = "<div class='row-item'>" + rowHtml +"</div>";
		tableHtml = tableHtml + rowWapperHtml;
	}
	console.log("tableHtml",tableHtml);
	document.getElementById("table_container").innerHTML  = tableHtml;
}
createTable();
</script>
</html>
